import styled from "styled-components";

export const VideoWrapper = styled.div`
  height: 100%;
  overflow: hidden;
  .player {
    overflow: hidden;
    display: flex;
    gap: 20px;
    padding: 40px;
    height: 100%;
    &-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .player-video {
        flex: 1;
        overflow: hidden;
        #dplayer {
          height: 100% !important;
          min-height: 500px;
        }
      }
      .player-toolbox {
        height: 50px;
        flex-shrink: 0;
        border: 1px solid #ddd;
        border-radius: 0 0 6px 6px;
      }
    }
    &-right {
      width: 400px;
      flex-shrink: 0;
    }
  }
  @media screen and (max-width: 1000px) {
    .player {
      /* flex-direction: column; */
      flex-wrap: wrap;
      overflow: auto !important;
      padding: 10px !important;
      &-left {
        width: 100%;
        #dplayer {
          height: 100% !important;
          max-height: 500px !important;
          min-height: 300px !important;
        }
      }
      &-right {
        width: 100%;
      }
    }
  }
`


export const VideoInfoWrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 25px;
  .video-info {
    &-title {
      font-size: 20px;
    }
    &-meta {
      font-size: 13px;
    }
  }
`

export const VideoCategoryWrapper = styled.div`
  background: #F1F2F3;
  border-radius: 6px;
  height: 500px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #F1F2F3;
  .video-category {
    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      flex-shrink: 0;
      background: #d1d1d1;
      padding: 0 16px;
    }
    &__content {
      flex: 1;
      overflow: auto;
      padding: 6px 10px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    &-item {
      height: 30px;
      display: flex;
      flex-shrink: 0;
      align-items: center;
      overflow: hidden;
      gap: 8px;
      font-size: 13px;
      cursor: pointer;
      color: #18191C;
      text-decoration: none;
      padding: 0 6px;
      border-radius: 2px;
      &.active {
        color: #00AEEC;
        background: #fff;
      }
    }
    &-name {
      flex: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      word-break: break-all;
    }
    &-duration {
      color: #9499A0;
    }
  }
`